<template>
  <div id="supplier">
    <el-form :inline="true" class="filter-form">
      <el-form-item label="公司名称">
        <el-input v-model="companyName" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="编号" prop="supplierId"></el-table-column>
      <el-table-column label="申请用户" prop="nickName"></el-table-column>
      <el-table-column label="营业执照">
        <template slot-scope="scope">
          <img :src="'/img'+scope.row.licenseLink" alt="营业执照" style="max-width: 50px; max-height: 50px;">
        </template>
      </el-table-column>
      <el-table-column label="公司名称" prop="companyName"></el-table-column>
      <el-table-column label="申请时间" prop="createDate"></el-table-column>
      <el-table-column label="审核状态">
        <template slot-scope="scope">
          {{ getCheckTagText(scope.row.checkTag) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 添加 slot-scope="scope" -->
        <template slot-scope="scope">
          <el-button size="mini" @click="editSupplier(scope.row)" class="el-icon-edit">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteSupplier(scope.row.supplierId)" class="el-icon-delete">注销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
    <!-- 修改模态框 -->
    <el-dialog
        title="修改供货商信息"
        :visible.sync="editDialogVisible"
        width="500px">
      <el-form :model="editSupplierForm">
        <el-form-item label="申请用户">
          <el-input v-model="editSupplierForm.nickName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="营业执照">
          <img :src="'/img'+editSupplierForm.licenseLink" style="max-width: 100px; max-height: 100px;">
          <el-input v-model="editSupplierForm.licenseLink"></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input v-model="editSupplierForm.companyName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
              v-model="editSupplierForm.createDate"
              type="date"
              placeholder="选择日期" :disabled="true"></el-date-picker>
        </el-form-item>
        <el-form-item label="法定代表人姓名">
          <el-input v-model="editSupplierForm.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="editSupplierForm.detailAddress" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="审核人">
          <el-input v-model="editSupplierForm.checker" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="editSupplierForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="editSupplierForm.checkTag">
            <el-option label="等待审核" value="S001-1"></el-option>
            <el-option label="审核未通过" value="S001-2"></el-option>
            <el-option label="审核通过" value="S001-3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核理由">
          <el-input v-model="editSupplierForm.checkReason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateSupplier">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "supplier",
  components: {},
  props: {},
  data() {
    return {
      companyName: '',
      type: '',
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      editDialogVisible: false,
      editSupplierForm: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    search() {
      this.currentPage = 1;
      this.getSupplierList();
    },
    reset() {
      this.companyName = '';
      this.type = '';
      this.currentPage = 1;
      this.getSupplierList();
    },
    getSupplierList() {
      const params = {
        companyName: this.companyName,
        type: this.type,
        page: this.currentPage,
        pageSize: this.pageSize
      };
      console.log('请求参数:', params);
      this.$axios.get('http://localhost:8090/supplier/list', {
        params
      }).then(response => {
        console.log('获取到的数据:', response.data.list);
        this.tableData = response.data.list;
        this.total = response.data.total;
      }).catch(error => {
        console.error(error);
      });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getSupplierList();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getSupplierList();
    },
    getCheckTagText(checkTag) {
      const tagMap = {
        'S001-1': '等待审核',
        'S001-2': '审核未通过',
        'S001-3': '审核通过'
      };
      return tagMap[checkTag] || '未知状态';
    },
    deleteSupplier(supplierId) {
      this.$confirm('确定要删除该供货商吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`http://localhost:8090/supplier/${supplierId}`).then(response => {
          if (response.data.success) {
            this.$message.success('删除成功');
            this.getSupplierList();
          } else {
            this.$message.error('删除失败');
          }
        }).catch(error => {
          console.error(error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 新增修改方法
    editSupplier(supplier) {
      this.editDialogVisible = true;
      this.editSupplierForm = {...supplier };
      // 处理日期格式，确保日期能正确显示
      if (supplier.createDate) {
        this.editSupplierForm.createDate = new Date(supplier.createDate);
      }
      if (supplier.checkTime) {
        this.editSupplierForm.checkTime = new Date(supplier.checkTime);
      }
    },
    updateSupplier() {
      this.$axios.put('http://localhost:8090/supplier', this.editSupplierForm).then(response => {
        if (response.data.success) {
          this.$message.success('修改成功');
          this.editDialogVisible = false;
          this.getSupplierList();
        } else {
          this.$message.error('修改失败');
        }
      }).catch(error => {
        console.error(error);
        this.$message.error('修改失败');
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getSupplierList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  }
};
</script>

<style scoped>
.filter-form {
  margin-bottom: 15px;
}
/* 新增或修改以下样式 */
.el-form-item {
  margin-bottom: 5px; /* 减小表单元素的下边距，这里设置为 8px，你可以根据需要调整 */
}
</style>

